<template>
  <ul class="topic" v-if="topics.length > 0">
    <li class="topic-one" v-for="(topic, index) in topics" :key="index" @click="clickTopic(topic.id)">
      <div class="title-one">
        <!-- 头像 -->
        <div :title="topic.username">
          <img class="owner-avatar" :src="avatarSrc(topic.avatar)" alt="">
        </div>
        <!-- tag -->
        <span class="tag-box"><span>{{ getTag(topic.tag, topic.status) }}</span></span>
        <!-- 标题 -->
        <div class="title">{{ topic.title }}</div>
      </div>
      <!-- 评论数、浏览量 -->
      <div class="number">
        <div>
          <ul class="action-list">
            <li class="item like clickable"><a class="title-box"><img
                src="~@assets/img/svg/zan.svg"
                class="icon"> <span class="count">{{ topic.view_num }}</span></a></li>
            <li class="item comment clickable">
              <a href="/post/6944579702572974116#comment" target="_blank" rel="" class="title-box">
                <img src="~@assets/img/svg/pin.svg"
                     class="icon"> <span class="count">{{ topic.comment_num }}</span></a></li>
            <li v-if="topic.comment.id > 0" class="item comment clickable" :title="topic.comment.username">
              <img class="last-commenter-avatar" :src="avatarSrc(topic.comment.avatar)" alt="">
            </li>
            <li  v-if="topic.comment.id > 0" class="item comment clickable" :title="topic.comment.created_at"> {{ topic.comment.created_at }}</li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <div v-else class="search-empty">暂无数据 ～～</div>
</template>

<script>
import {ORIGIN} from '../../config'

export default {
  name: 'topics-list',
  props: ['topics'],
  computed: {
    // 此处闭包
    avatarSrc() {
      return function (avatar) {
        if (avatar) {
          return avatar
        } else return ORIGIN + '/public/img/default/avatar-default.png'
      }
    },
    getTag() {
      return function (tag, status) {
        if (status == 1) {
          return '置顶'
        } else return tag
      }
    }
  },
  methods: {
    clickTopic(topic_id) {
      this.$router.push({
        name: 'topic',
        params: {id: topic_id}
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.search-empty {
  padding: 200px 50px;
  text-align: center;
  font-size: 16px;
  color: #71777c;
}

.topic .topic-one {
  border-bottom: 1px solid #dddddd;
  cursor: pointer;

  &:hover {
    background: #f6f6f6;
  }
}

/* 帖子 */
.topic li .title-one {
  height: 50px;
  padding: 0 12px 0 10px;
  cursor: pointer;
  position: relative;
  display: flex;

  &:hover {
    background: #f6f6f6;
  }
}

.owner-avatar {
  height: 30px;
  width: 30px;
  margin-top: 10px;
  border-radius: 5px;
}

.number {
  margin-left: 10px;

  .action-list {
    display: inline-flex;
    white-space: nowrap;
  }

  .comments {
    font-size: 14px;
    color: #9e78c6;

    &:hover {
      text-decoration: underline;
    }
  }

  .browsed {
    font-size: 12px;

    &:hover {
      text-decoration: underline;
    }
  }
}

.tag-box {
  span {
    @include tag-box;
  }

  // 禁止折行
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.title {
  max-width: 975px;
  flex: 1;
  margin-left: 5px;
  line-height: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  &:hover {
    text-decoration: underline;
  }
}

@media (max-width: $action-width) {
  .title {
    flex: 1;
    margin-left: 5px;
    line-height: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    &:hover {
      text-decoration: underline;
    }
  }
}

.action-list > .item {
  height: 1.5rem;
  //font-size: 1rem;
}

.action-list > .item {
  display: flex;
  white-space: nowrap;
}

.action-list > .item .title-box {
  display: flex;
  align-items: center;
  padding: 0 5px;
  height: 100%;
  font-size: 14px;

}

.action-list > li:nth-child(3) {
  padding: 0 10px 0 50px;
}

li {
  list-style: none;
}

.last-commenter-avatar {
  flex: 2;
  float: right;
  height: 20px;
  //margin: 15px 5px 0 0;
  border-radius: 5px;
}

.last-comment-date {
  float: right;
  font-size: 12px;
  line-height: 50px;
}
</style>
